<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文件搜索</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="codemirror/codemirror.css">
    <link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">
    <link rel="stylesheet" href="codemirror/addon/search/matchesonscrollbar.css">
    <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="codemirror/theme/ambiance.css">
    <style>
        .CodeMirror {
            border: 1px solid #eee;
            height: 500px;
        }

    </style>

</head>
<body class="layui-layout-body">
<div class="layui-form-item">
    <!--<label class="layui-form-label">单行输入框</label>-->
    <div class="layui-row" lay-filter="searchBar">
        <div class="layui-col-md4">
            <input type="text" name="searchString" lay-verify="title" autocomplete="off" placeholder="请搜索" class="layui-input" id="searchStr_input" value="path:entities .xml !path:oracle !path:mysql !path:target">
        </div>

        <div class="layui-col-md2 layui-btn-group">
            <button class="layui-btn" id="submit_btn"><i class="layui-icon layui-icon-search"></i></button>
            <button class="layui-btn"id="help_btn"><i class="layui-icon layui-icon-help"></i></button>
        </div>

    </div>
</div>
<div class="layui-row">
    <div class="layui-col-xs6">
        <table id="file_list"  lay-filter="file_list">
            <thead>
            <tr>
                <th lay-data="{field:'fileName', width:250, sort: true}">文件名</th>
                <th lay-data="{field:'filePath', width:300, sort: true}">路径</th>

            </tr>
            </thead>
        </table>
    </div>
    <div class="layui-col-xs6">
        <div id="file_title"></div>
        <div id="file_code" >

        </div>
    </div>
</div>
<script src="layui/layui.all.js"></script>
<script src="codemirror/codemirror.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/addon/fold/xml-fold.js"></script>
<script src="codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/addon/hint/xml-hint.js"></script>
<script src="codemirror/addon/edit/matchtags.js"></script>
<script src="codemirror/addon/dialog/dialog.js"></script>
<script src="codemirror/addon/search/searchcursor.js"></script>
<script src="codemirror/addon/search/search.js"></script>
<script src="codemirror/mode/clike/clike.js"></script>
<script src="codemirror/addon/edit/matchbrackets.js"></script>
<script src="codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="codemirror/addon/search/matchesonscrollbar.js"></script>
<script src="codemirror/addon/search/jump-to-line.js"></script>
<script src="codemirror/keymap/vim.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
    var $ = layui.$;
    var table = layui.table;
    table.init('file_list');
    $("#submit_btn").click(function(){
        var searchString = $("#searchStr_input").val();
        //alert(searchString);
        //console.log(table.render);
        if(searchString.length==0){
            searchString='path:entities .xml !path:oracle !path:mysql !path:target';
        }
        table.render({
            elem: '#file_list'
            ,height: 500
            ,url: '/api/searchByString?searchString='+searchString //数据接口
            ,page: true
            ,limit:1000//开启分页
            ,cols: [[ //表头
                {field: 'fileName', title: '文件名', width:250, sort: true, fixed: 'left'}
                ,{field: 'filePath', title: '路径', width:300,sort: true, fixed: 'left'}
            ]]
            ,toolbar: true
            ,defaultToolbar:['exports']
        });

        table.on('row(file_list)', function(obj){
            var $data = obj.data;

            $.ajax({
                type: "GET",
                url: "/api/loadfile",
                data: {filename:$data.fileName, filepath:$data.filePath},
                dataType: "text",
                success: function(code){
                    editor.setValue(code);
                    var $fileTitle = $("#file_title");
                    $fileTitle.attr("fileName",$data.fileName);
                    $fileTitle.attr("filePath",$data.filePath);
                    $fileTitle.text($data.filePath+"\\"+$data.fileName);
                },
                fail:function(data){
                    console.log(data);
                }
            });
        });
    });
    $("#help_btn").click(function(){
        layer.open({
            type: 2 //此处以iframe举例
            ,title: '搜索帮助'
            ,area: ['780px', '360px']
            ,shade: 0
            ,maxmin: true
            ,offset: [
                100
                ,100
            ]
            ,content: '/help.txt'
            ,btn: [ '关闭'] //只是为了演示
            ,btn2: function(){
                layer.closeAll();
            }

            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
                layer.setTop(layero); //重点2
            }
        });
    })


    /*layui.use('code', function(){ //加载code模块
        layui.code({
            encode: true
            ,skin: 'notepad'
            ,height: '100px'
            ,about:false
        }); //引用code方法
    });*/
    CodeMirror.commands.save = function(cm){
        var $fileTitle = $("#file_title");
        $.ajax({
            type: "POST",
            url: "/api/savefile",
            data: {filename:$fileTitle.attr("fileName"), filepath:$fileTitle.attr("filePath"),content:cm.getValue()},
            dataType: "json",
            success: function(){
                alert("OK");
            }
        });

    };
    var tags={

    }

    function completeAfter(cm, pred) {
        var cur = cm.getCursor();
        if (!pred || pred()) setTimeout(function() {
            if (!cm.state.completionActive)
                cm.showHint({completeSingle: false});
        }, 100);
        return CodeMirror.Pass;
    }

    function completeIfAfterLt(cm) {
        return completeAfter(cm, function() {
            var cur = cm.getCursor();
            return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
        });
    }

    function completeIfInTag(cm) {
        return completeAfter(cm, function() {
            var tok = cm.getTokenAt(cm.getCursor());
            if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;
            var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
            return inner.tagName;
        });
    }

    var editor = CodeMirror(document.getElementById("file_code"), {
        lineNumbers: true
        , mode: "xml"
        , theme:"ambiance"
        , keyMap: "vim"
        , matchBrackets: true
        , showCursorWhenSelecting: true
        , inputStyle: "contenteditable"
        , extraKeys: {
            "Ctrl-F": "findPersistent",
            "'<'": completeAfter,
            "'/'": completeIfAfterLt,
            "' '": completeIfInTag,
            "'='": completeIfInTag,
            "Ctrl-Space": "autocomplete"
        }
        , matchTags: {bothTags: true}
        , hintOptions: {schemaInfo: tags}
        //, tabSize:4
        //, keyMap:""
        //, scrollbarStyle:""
    });
</script>
</body>
</html>
